<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>客户资源管理</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/formSelects-v4.css" media="all ">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
</head>
<body>
<!--  历史记录  -->
<div id="chat" style="margin-top: 20px;display:none;">
    <form class="layui-form" id="chatForm" style="margin-bottom: 30px" lay-filter="chatForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户编号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="custId" id="addChatId" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="custName" id="addname" class="layui-input" readonly>
                </div>
            </div>
        </div>
    </form>
    <table class="layui-table" lay-filter="chatTable" id="chatTable"></table>
</div>
<div id="chatEdit" style="margin-top: 20px;display:none;">
    <form class="layui-form" id="chatEditForm" lay-filter="chatEditForm">
        <input type="hidden" name="cutid"  id="bianhao">
        <input type="hidden" name="cutname" id="mingzi" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">地点：</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" id="a" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">概要：</label>
                <div class="layui-input-inline">
                    <input type="text" name="ontline" id="b" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-inline">
                    <input type="text" name="beizhu" value="" id="c" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细信息：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入详细信息" value="" id="d" name="xinxi" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>
<%--修改所显示的框--%>
<div id="chatEdits" style="margin-top: 20px;display:none;">
    <form class="layui-form" id="chatEditForms" lay-filter="chatEditForms">
        <input type="hidden" name="id" id="bianaaa">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">地点：</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" id="address"  class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">概要：</label>
                <div class="layui-input-inline">
                    <input type="text" name="ontline" id="gaiyao" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-inline">
                    <input type="text" name="beizhu" id="beizhu" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细信息：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入详细信息" name="xinxi" id="xinxi" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>
<%--流失--%>
<div id="liushi" style="margin-top: 30px;display: none">
    <form class="layui-form" id="liushiForms" lay-filter="liushiForms">
    <%--客户等级--%>
    <input type="hidden" name="level" id="dengjis">
    <%--客户信誉度--%>
    <input type="hidden" name="satisfied" id="xinyudu">
    <%--客户满意度--%>
    <input type="hidden" name="credit" id="manyidu">
    <%--负责人--%>
    <input type="hidden" name="userid" id="fuzeren">
    <%--状态--%>
    <input type="hidden" name="stat" VALUE="25">
    <%--客户名称--%>
    <input type="hidden" name="custname" id="kehuname">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">客户编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="custId" id="bianhaosss" class="layui-input" >
            </div>
        </div>
        <%--<div class="layui-inline">--%>
            <%--<label class="layui-form-label">上次下单时间：</label>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<input type="text" name="uptime"  class="layui-input">--%>
            <%--</div>--%>
        <%--</div>--%>
        <div class="layui-inline">
            <label class="layui-form-label">原因：</label>
            <div class="layui-input-inline">
                <input type="text" name="reason" class="layui-input" >
            </div>
        </div>
    </div>
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="lasttime" id="timer"  class="layui-input">
            </div>
        </div>
    </div>
    </form>
</div>
<div id="plan" style="display: none">
    <input type="hidden" id="iddd">
    <table class="layui-table" lay-filter="planTable" id="planTable"></table>
</div>
    <h2>客户资源管理</h2>
    <hr>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户名:</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input id="username" type="text" autocomplete="off" class="layui-input">
                </div>
                <%--<label class="layui-form-label">分配状态:</label>--%>
                <%--<div class="layui-input-inline" style="width: 300px">--%>
                    <%--<select id="stats" class="layui-input">--%>
                        <%--<option value="-1">请选择</option>--%>
                    <%--</select>--%>
                <%--</div>--%>
                <div class="layui-input-inline" style="width: 200px">
                    <button type="button" class="layui-btn" onclick="SearchData();"><i class="layui-icon layui-icon-search"></i>查询</button>
                </div>
            </div>
        </div>
    </form>
    <div class="layui-fluid">
        <table id="cusTable" lay-filter="cusTable"></table>
    </div>
    <script>
        $.get("${path}/customers/search",function(data){
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#stats");
                opt.text(this[0].name).val(this[0].id);
                var opt = $("<option></option>").appendTo("#stats");
                opt.text(this[1].name).val(this[1].id);
            });
        });
        // layui.form.render();
    </script>
    <script>
        layui.use(["table","form"],function () {
            var table=layui.table;
            //渲染表格
            table.render({
                elem:"#cusTable",
                url:"${path}/customers/list",
                page:true,
                toolbar:'#toolbarDemo',
                cols:[[
                    // {type:'checkbox'},
                    {field:'custId',title:'客户编号'},
                    {field:'custName',title:'客户名称'},
                    {templet:'#dengji',title:'客户类型'},
                    {templet:'#stat',title:'状态'},
                    // {templet:'#fenpeistat',title:'分配状态'},
                    {templet:'#people',title:'负责人'},
                    {toolbar:'#barDemo',title:'操作'}
                ]]

            })
            layui.form.render();
            //监听工具栏事件
            table.on('toolbar(cusTable)',function (obj) {
                var e=obj.event;
                switch (e) {
                    case "add":
                        $.get("${path}/customers/addform",function (str) {
                            layer.open({
                                type:1,
                                title:'添加客户',
                                area:'700px',
                                content:str,
                                skin:'layui-layer-molv',
                                btn:['确定','取消'],
                                yes:function (index) {
                                    var params=$("#add_cus_form").serialize();
                                    console.log(params)
                                    $.post("${path}/customers/add",params,function () {
                                        layer.close(index);
                                        table.reload("cusTable")
                                    })
                                }
                            })
                        })
                        break;
                    case "batchDelete":
                        var rows = table.checkStatus('cusTable');
                        var data = rows.data;
                        if(data.length == 0){
                            layer.msg("请选择要删除的数据",function(){});
                            return;
                        }
                        layer.confirm('确定要删除这么多数据吗？',{icon:5,title:'友情提示'},function (index) {
                            var params = "";
                            for(let cusTable of data){
                                params += "ids="+cusTable.id+"&";
                            }
                            $.post('${path}/customers/batchDelete',params,function () {
                                layer.close(index);
                                table.reload('cusTable');
                            });
                        });
                        break;
                }
            })

            table.on('tool(cusTable)',function (obj) {
                var e=obj.event;
                var data =obj.data;
                switch (e) {
                    case "edit":
                        $.get("${path}/customers/addform",function (str) {
                            layer.open({
                                type:1,
                                title:'修改客户信息',
                                area:'700px',
                                content:str,
                                skin:'layui-layer-molv',
                                btn:['确定','取消'],
                                success:function(){
                                    $("#bianhaoss").val(data.id)
                                    $("#name").val(data.custName);
                                    $("#id").val(data.custId);
                                    $("#diqu").val(data.region);
                                    $("#level_add").val(data.dictionarieslevel.id);
                                    layui.form.render();
                                    $("#satisfied_add").val(data.dictionariesmanyi.id);
                                    layui.form.render();
                                    $("#credit_add").val(data.dictionariesxin.id);
                                    layui.form.render();
                                    $("#phone").val(data.phone);
                                    $("#email").val(data.email);
                                    $("#addresss").val(data.address);
                                    $("#zhuangtai").val(data.dictionariesstat.id);
                                    layui.form.render();
                                    // $("#fenpeizhuangtai").val(data.dictionariesfenpeistat.id);
                                    // layui.form.render();
                                    console.log(data)
                                },
                                yes:function (index) {
                                    var params=$("#add_cus_form").serialize();
                                    console.log(params)
                                    $.post("${path}/customers/update",params,function () {
                                        layer.close(index);
                                        table.reload("cusTable")
                                    })
                                }
                            })
                        })
                        break;
                    case "select":
                        $.get("${path}/customers/selectfrom",function (str) {
                            layer.open({
                                type:1,
                                title:'查看信息',
                                area:'700px',
                                content:str,
                                skin:'layui-layer-molv',
                                btn:'返回',
                                success:function(){
                                    $("#bianhaos").val(data.id)
                                    $("#name").val(data.custName);
                                    $("#id").val(data.custId);
                                    $("#diqu").val(data.region);
                                    $("#level_add").val(data.dictionarieslevel.id);
                                    layui.form.render();
                                    $("#satisfied_add").val(data.dictionariesmanyi.id);
                                    layui.form.render();
                                    $("#credit_add").val(data.dictionariesxin.id);
                                    layui.form.render();
                                    $("#phone").val(data.phone);
                                    $("#email").val(data.email);
                                    $("#addressa").val(data.address);
                                    $("#zhuangtai").val(data.dictionariesstat.id);
                                    layui.form.render();
                                    // $("#fenpeizhuangtai").val(data.dictionariesfenpeistat.id);
                                    // layui.form.render();
                                    console.log(data)
                                }
                            })
                        })
                        break;
                    case "jilu":
                        // alert(data.custId);
                        // alert(data.custName);
                        layer.open({
                            type: 1,
                            title: "交往记录",
                            skin: "layui-layer-molv",
                            anim: 0,
                            area: "800px",
                            offset:"300px;",
                            content: $("#chat"),
                            btn: ['确定'],
                            success: function () {
                                $("#addChatId").val(data.custId);
                                $("#addname").val(data.custName);
                                table.render({
                                    elem: '#chatTable'
                                    ,url:'${path}/jilu/select?cutid='+data.custId+'&cutname='+data.custName
                                    ,text: {none: '没有查到相关数据'}
                                    ,even: true
                                    ,page : true
                                    ,limit : 10
                                    ,toolbar: "#chatTopDemo"
                                    ,cols: [[
                                        {field:'timer', title: '时间'}
                                        ,{field:'address', title: '地点'}
                                        ,{field:'ontline', title: '概要'}
                                        ,{field:'xinxi', title: '详细信息'}
                                        ,{field:'beizhu', title: '备注'}
                                        ,{toolbar:'#chatDemo', title: '操作'}
                                    ]]
                                });
                            }
                        });
                        break;
                    case "order":
                        console.log(data)
                        layer.open({
                            type: 1,
                            title: "历史订单",
                            skin: "layui-layer-molv",
                            anim: 0,
                            offset:"260px",
                            area: "800px",
                            content: $("#plan"),
                            btn: ['返回'],
                            success: function () {
                                $("#iddd").val(data.id);
                                //  添加计划表格
                                table.render({
                                    elem: '#planTable'
                                    ,url:'${path}/order/xiangqing?Ordered='+data.custName
                                    ,text: {none: '详细信息'}
                                    ,even: true
                                    ,page : true
                                    ,limit : 10
                                    ,toolbar: "#planTopDemo"
                                    ,cols: [[
                                        {field:'id', width:105, title: '商品ID'}
                                        ,{templet:'#names', title: '商品名称'}
                                        ,{field:'price', title: '商品单价'}
                                        ,{field:'fuzhu', title: '商品数量'}
                                    ]]
                                });
                            }
                        });
                        break;
                    case "liushi":
                        console.log(data)
                        layer.confirm('确定要流失吗？',{"offset":"350px"}, function (index){
                            layer.open({
                                type: 1,
                                title: '流失内容',
                                area: '700px',
                                content: $("#liushi"),
                                skin: 'layui-layer-molv',
                                btn: ['确定','返回'],
                                success:function () {
                                    $("#bianhaosss").val(data.custId);
                                    $("#dengjis").val(data.dictionarieslevel.name);
                                    $("#xinyudu").val(data.dictionariesxin.type);
                                    $("#manyidu").val(data.dictionariesmanyi.type);
                                    $("#fuzeren").val(data.crmUserpeople.username);
                                    // $("#zhuangtai").val(data.dictionariesstat.id);
                                    $("#kehuname").val(data.custName);
                                    console.log(data)
                                },
                                yes:function (index) {
                                    var str=$("#liushiForms").serialize();
                                    console.log(str)
                                    <%--$.post("${path}/customers/updateloss",{"aa":data.id},function () {--%>
                                        $.post("${path}/loss/add",str,function () {
                                            $.post("${path}/customers/delid",{"id":data.id},function () {
                                                table.reload("cusTable");
                                                layer.closeAll();
                                            })
                                        })
                                    // })
                                }
                            })
                        })
                        break;
                }
            })

            //增加历史记录出来的框
            table.on('toolbar(chatTable)', function(obj){
                switch(obj.event){
                    case 'jiluadd':
                        $("#address").val('');
                        $("#gaiyao").val("");
                        $("#beizhu").val("");
                        $("#xinxi").val("");
                        layer.open({
                            type: 1,
                            title: "添加交往记录",
                            skin: "layui-layer-molv",
                            anim: 0,
                            offset:"200px",
                            area: "800px",
                            content: $("#chatEdit"),
                            btn: ['确定','取消'],
                            success: function () {
                                var idd=$("#addChatId").val();
                                var namee=$("#addname").val();
                                $("#bianhao").val(idd);
                                $("#mingzi").val(namee);

                            },
                            yes: function (index) {
                                var str = $("#chatEditForm").serialize();
                                console.log(str);
                               $.post("${path}/jilu/add",str,function () {
                                   layer.close(index);
                                   table.reload("chatTable");
                                   $("#a").val('');
                                   $("#b").val('');
                                   $("#c").val('');
                                   $("#d").val('');
                               })
                            }
                        });
                        break;
                }
            });
        //    修改或删除交往记录
            table.on('tool(chatTable)', function(obj){
                var data=obj.data;
                console.log(data);
                switch(obj.event){
                    case 'xiugai':
                        layer.open({
                            type: 1,
                            title: "修改记录",
                            skin: "layui-layer-molv",
                            anim: 0,
                            offset:"200px",
                            area: "800px",
                            content: $("#chatEdits"),
                            btn: ['确定','取消'],
                            success: function () {
                                // $("timer").val(data.timer);
                                $("#address").val(data.address);
                                $("#gaiyao").val(data.ontline);
                                $("#beizhu").val(data.beizhu);
                                $("#xinxi").val(data.xinxi);
                                $("#bianaaa").val(data.id);
                            },
                            yes: function (index) {
                                var str = $("#chatEditForms").serialize();
                                console.log(str);
                                $.post("${path}/jilu/update",str,function () {
                                    layer.close(index);
                                    table.reload("chatTable")
                                })
                            }
                        });
                        break;
                    case "delete":
                        layer.open({
                            time:0,
                            title:'友情提示',
                            offset:"280px",
                            content:'确定要删除此行数据吗？',
                            shade:[0.3,'#000'],
                            btn:['确定','取消'],
                            yes:function () {
                                $.post("${path}/jilu/deleteService",{id:data.id},function () {
                                    layer.msg('删除成功...',{time:1200,offset: '260px'});
                                    table.reload('chatTable');
                                })
                            }
                        })
                        break;
                }
            });
            table.on('toolbar(planTable)', function(obj){
                switch (obj.event) {
                    case "querenshouhuo":
                        var aaa=$("#iddd").val();
                        layer.confirm('确定要收货吗？',{"offset":"350px"}, function (index){

                            $.post("${path}/customers/updateshouhuo",{"cusno":aaa,"Ordered":aaa},function (data) {
                                if(data.code==1){
                                    layer.msg(data.msg,{icon:5});
                                }else{
                                    layer.msg("收货成功...",{time:"1000"},function () {
                                        layer.closeAll();
                                    })
                                }


                            })
                        })
                        break;
                }
            })

        })


        function SearchData() {
            layui.table.reload("cusTable",{
                page:{
                    curr:1
                },
                where:{
                    "custName":$("#username").val(),
                    "fenpeistat":$("#stats").val()
                }
            })
        }
    </script>
    <%--修改--%>
    <script type="text/html" id="barDemo">
        <a href="javascript:void (0)" lay-event="select" title="查看"><span class="layui-icon layui-icon-list"></span></a>
        <shiro:hasPermission name="customers:addform">
            <a href="javascript:void (0)" lay-event="edit" title="修改"><i class="layui-icon layui-icon-edit"></i></a>
        </shiro:hasPermission>

                <a href="javascript:void (0)" lay-event="jilu" title="历史记录"><span class="layui-icon layui-icon-dialogue"></span></a>

                <a href="javascript:void (0)" lay-event="order" title="历史订单"><span class="layui-icon layui-icon-form"></span></a>

                <a href="javascript:void (0)" lay-event="liushi" title="流失"><span class="layui-icon layui-icon-face-surprised"></span></a>
    </script>
    <script type="text/html" id="dengji">
        {{d.dictionarieslevel.name}}
    </script>
    <script type="text/html" id="stat">
        {{d.dictionariesstat.name}}
    </script>
    <script type="text/html" id="fenpeistat">
        {{d.dictionariesfenpeistat.name}}
    </script>
    <script type="text/html" id="people">
        {{d.crmUserpeople.username}}
    </script>
    <script type="text/html" id="names">
        {{d.crmShopping.name}}
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <shiro:hasPermission name="customers:addform">
                <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
            </shiro:hasPermission>
            <%--<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i>批量删除</button>--%>
        </div>
    </script>
<script type="text/html" id="planTopDemo">
    <button class="layui-btn layui-btn-sm" lay-event="querenshouhuo" title="确认收货"><i class="layui-icon layui-icon-star-fill"></i></button>
</script>
<!--  增加历史记录  -->
<script type="text/html" id="chatTopDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="jiluadd" title="增加"><i class="layui-icon layui-icon-add-circle"></i></button>
    </div>
</script>
<script id="chatDemo" type="text/html">
    <a href="javascript:void (0)" lay-event="xiugai" title="修改"><span class="layui-icon layui-icon-edit"></span></a>
    <a href="javascript:void (0)" lay-event="delete" title="删除"><span class="layui-icon layui-icon-delete"></span></a>
</script>
<script>
    //  获取时间
    function getNow(s) {
    return s < 10 ? '0' + s : s;
    }
    function dates() {
    var now = new Date();
    //格式化日，如果小于9，前面补0
    var day = ("0" + now.getDate()).slice(-2);
    //格式化月，如果小于9，前面补0
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    // var h = now.getHours();
    // var minute = now.getMinutes();
    // var s = now.getSeconds();
    //拼装完整日期格式
    var today = now.getFullYear() + "-" + (month) + "-" + (day);
    // var today = now.getFullYear() + "-" + (month) + "-" + (day) + " " + getNow(h) + ":" + getNow(minute) + ":" + getNow(s);
    return today;
    }
    $("#timer").val(dates())
</script>
</body>
</html>
